<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../../css/public.css" media="all">
    <link href="/element/css/index.css" rel="stylesheet"/>
    <script src="/element/js/vue.js"></script>
    <script src="/element/js/index.js"></script>
    <script src="/element/js/axios.js"></script>
    <style>
        .table-label{
            width: 110px;
            background-color: #EEEEEE;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="layuimini-container">
        <div class="layuimini-main">
            <fieldset class="table-search-fieldset">
                <form class="layui-form layui-form-pane" action="">
                    <table class="layui-table">
                        <thead>
                        <tr>
                            <th>昵称</th>
                            <th>加入时间</th>
                            <th>签名</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td class="table-label">
                                长输入框
                            </td>
                            <td>
                                <input type="text" name="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
                            </td>
                            <td>
                                <label class="layui-form-label">长输入框</label>
                                <div class="layui-input-block">
                                    <input type="text" name="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
                                </div>
                            </td>
                            <td>人生就像是一场修行</td>
                        </tr>
                        <tr>
                            <td>许闲心</td>
                            <td>2016-11-28</td>
                            <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
                        </tr>
                        </tbody>
                    </table>
                </form>
            </fieldset>
        </div>
    </div>
</div>

<script>
    function set(){
        this.items={}
    }
    set.prototype.add=function(val){
        if(this.has(val))return false
        this.items[val]=val
        return true
    }
    set.prototype.has=function(val){
        return this.items.hasOwnProperty(val)
    }
    set.prototype.remove=function(val){
        if(!this.has(val))return false
        delete this.items[val]
        return true
    }
    set.prototype.clear=function(){
        this.items={}
    }
    set.prototype.values=function(){ //以数值形式输出
        return Object.keys(this.items)
    }
    set.prototype.size=function(){
        return Object.keys(this.items).length
    }

    var l=new set()
    console.log(l.add(123)) //true
    console.log(l.add(123)) //false
    l.add(564)
    console.log(l.remove(123)) //true
    // console.log(l.has(123))
    // console.log(l.has(654))
    console.log(l.values()) //["564"]
    l.add(23)
    l.add(64)
    console.log(l.values())//["564","23","64"]
    l.clear()
    console.log(l.values())//[]


</script>
<script>
    var Main = {
        components: {},
        props: [],
        data() {
            return {
                formData: {
                    mobile: undefined,
                    field102: undefined,
                    field103: undefined,
                    field104: undefined,
                    field105: undefined,
                    field106: [],
                },
                rules: {
                    mobile: [{
                        required: true,
                        message: '请输入手机号',
                        trigger: 'blur'
                    }, {
                        pattern: /^1(3|4|5|7|8|9)\d{9}$/,
                        message: '手机号格式错误',
                        trigger: 'blur'
                    }],
                    field102: [{
                        required: true,
                        message: '请输入单行文本',
                        trigger: 'blur'
                    }],
                    field103: [{
                        required: true,
                        message: '请输入单行文本',
                        trigger: 'blur'
                    }],
                    field104: [{
                        required: true,
                        message: '请输入多行文本',
                        trigger: 'blur'
                    }],
                    field105: [{
                        required: true,
                        message: '请选择下拉选择',
                        trigger: 'change'
                    }],
                    field106: [{
                        required: true,
                        type: 'array',
                        message: '请至少选择一个级联选择',
                        trigger: 'change'
                    }],
                },
                field105Options: [{
                    "label": "选项一",
                    "value": 1
                }, {
                    "label": "选项二",
                    "value": 2
                }],
                field106Props: {
                    "multiple": false,
                    "label": "label",
                    "value": "value",
                    "children": "children"
                },
            }
        },
        computed: {},
        watch: {},
        created() {},
        mounted() {},
        methods: {
            submitForm() {
                this.$refs['elForm'].validate(valid => {
                    if (!valid) return
                    // TODO 提交表单
                })
            },
            resetForm() {
                this.$refs['elForm'].resetFields()
            },
        }
    }
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')

</script>
</body>
</html>